<template>
  <section class="sales-statistics section">
    <h2 class="section-tit">
      <span>销售统计</span>
      <span>销售排行</span>
    </h2>
    <div class="content-wrap">
      <div class="content-item-wrap">
        <w-table class="statistics" :columns="[{title: ''},{title: '订单量'},{title: '订单金额'}]">
          <tr v-for="item in statistics">
            <td>{{typeOfStatistics(item.statisticsType)}}销量</td>
            <td class="c-main">{{item.orderNum || 0}}</td>
            <td class="c-main">{{item.orderPrice || 0}}元</td>
          </tr>
        </w-table>
      </div>  
      <div class="content-item-wrap">
        <w-table class="rank" :columns="[{title: '排名'},{title: '商品信息'},{title: '销量'}]">
          <tr v-for="(item, index) in ranking">
            <td>{{index + 1}}</td>
            <td class="info">
              <img :src="item.goodsImgPath" alt="">
              <p>{{item.goodsName}}</p>
            </td>
            <td class="c-main">{{item.salesVolume || 0}}</td>
          </tr>
        </w-table>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    props: {
      statistics: {
        type: Array,
        default: () => { return [] }
      },
      ranking: {
        type: Array,
        default: () => { return [] }
      }
    },
    methods: {
      typeOfStatistics(type) {
        if (type == 0) {
          return '今日'
        }

        if (type == 1) {
          return '周'
        }

        if (type == 2) {
          return '月'
        }

        return ''
      }
    }
  }
</script>

<style lang="scss">
  @import './style.scss';
</style>